@import "../variables";
@import "../mixins";

.msgMeItem {
    background-color: #fff;
    font-family: inherit;
    padding-top: 10px;
    .clearfix();

    .userCard {
        padding: 0px 10px 0px 10px;

        .userAvatar {
            float: left;
            .square(@AvatarM);
            border-radius: @AvatarBorderRadius;
            margin-right: 10px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .userName {
            float: left;
            height: @AvatarM;
            position: relative;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .msg-timestamp-content {
            padding-top: 40px;
            position: absolute;
            bottom: 0;
            color: @timeColor;
        }

        .clearfix();
    }

    .msgContainer {
        width: 100%;
        display: inline-block;
        padding-top: 10px;
        .clearfix();
    }

    .msgWrapper {
        width: 100%;
        position: relative;
        /*&::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-style: solid;
            border-width: 0 1px 1px 0;
            border-color: transparent @bubbleBorderColor @bubbleBorderColor transparent;
            position: absolute;
            top: 25px;
        }*/
        .msgDate {
            color: @msgDateColor;
        }
    }

    .msgImg {
        /*max-width: 100%;*/
        width: 100%;
        height: auto;
        margin-bottom: -5px;
    }

    .msg-timestamp {
        background: url("../images/common/time.png") no-repeat 10px center;
        padding-left: 20px;
        background-size: 8px;
        color: @timeColor;
    }

    &.audio {
        .audioTime {
            top: 7px;
            left: 40px;
            color: @audioColor;
        }

        .msgContent {
            border: 1px solid @audioColor;
            border-radius: @AvatarBorderRadius;
        }

        .msgWrapper {
            /*&::after {
                border-color: transparent @audioColor @audioColor transparent;
            }*/
        }
    }

    &.text {
        .msgContent {
            padding: 8px 13px;
        }
    }

    &.feel {
        .msgContainer {
            margin-bottom: 0;
        }
    }

    &.you {
        .msgWrapper {
            float: left;

            &::after {
                left: 5px;
                transform: rotate(135deg);
                background: @receiveColorBg;
            }
        }

        .msgContent {
            float: left;
            background: @receiveColorBg;
        }
    }

    &.me {
        .userAvatar, .msgContainer {
            float: right;
        }

        .msgWrapper {
            float: right;

            &::after {
                right: 2px;
                transform: rotate(-45deg);
                background: @sendColorBg;
            }
        }

        .msgContent {
            background: @sendColorBg;
        }
    }

    &.pic {
        .msgContainer {
            text-align: center;
        }

        .msgWrapper {
            margin-bottom: -5px;
        }
    }
}

.msgYouItem {
    font-family: inherit;
    .clearfix();

    .userCard {
        padding-bottom: 15px;
        .clearfix();

        .userAvatar {
            .square(@AvatarS);
            border-radius: @AvatarBorderRadius;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .userName {
            float: right;
            position: relative;
            text-align: right;
            margin-top: -2px;
            padding-right: 6px;
            color: @timeColor;
            width: 85%;

            .nickName {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .msg-timestamp-content {
            padding-top: 40px;
            position: absolute;
            bottom: 0;
            color: @timeColor;
        }

        .clearfix();
    }

    .msgContainer {
        width: 100%;
        display: inline-block;
        padding-top: 4px;
    }

    .msgContent {
        display: inline-block;
        word-break: break-all;
        border: 1px solid @bubbleBorderColor;
        padding: 3px 5px;
        text-align: left;
        font-size: 14px;
        background: @youBgColor;

        a {
            color: @msgLinkColor;

            &:hover {
                text-decoration: underline;
            }

            &.convertLink {
                display: block;
            }
        }


        .btnDownload {
            color: @msgLinkColor;

            &:not(:hover) {
                color: #C4C4C4 !important;
            }
        }
    }

    .msgWrapper {
        width: 100%;
        position: relative;
        /*&::after {
            content: '';
            display: block;
            width: 4px;
            height: 4px;
            border-style: solid;
            border-width: 0 1px 1px 0;
            border-color: transparent @msgYouBorderColor @msgYouBorderColor transparent;
            position: absolute;
            top: 8px;
        }*/
        .msgDate {
            color: @msgDateColor;
        }
    }

    .msgImg {
        width: 100%;
        height: auto;
        border-radius: 0 0 12px 12px;
        margin-bottom: -10px;
    }

    &.text {
        .msgContent {
            padding: 8px 13px;
        }
    }

    &.you {
        .userAvatar, .msgContainer {
            float: left;
        }

        .userName {
            float: left;
            position: relative;
            text-align: left;
            margin-top: -2px;
            padding-left: 6px;
            color: @timeColor;
            width: 85%;

            .nickName {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .msgContent {
            border-radius: 0px 5px 5px 5px;
            color: @fontColor;
        }
    }

    &.me {
        .userAvatar, .msgContainer {
            float: right;
        }

        .msgWrapper {
            float: right;

            &::after {
                right: -2px;
                transform: rotate(-45deg);
                background: @bodyColor;
            }
        }

        .msgContent {
            border-radius: 5px 0px 5px 5px;
            color: @fontColor;
        }
    }
}

.msgMeList {
    border-radius: @AvatarBorderRadius;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.04);

    .msgMeItem:first-child {
        border-radius: @AvatarBorderRadius @AvatarBorderRadius 0px 0px;
    }

    .msgMeItem:last-child {
        border-radius: 0px 0px @AvatarBorderRadius @AvatarBorderRadius;

        .msgImg, .video-js, .vjs-poster {
            border-radius: 0 0 @AvatarBorderRadius @AvatarBorderRadius;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04);
        }

        .msgImg {
            margin-bottom: -15px;
        }

        .msgContainer {
            padding-bottom: 10px;
        }
    }

    .msgMeItem:only-child {
        border-radius: @AvatarBorderRadius;

        .msgImg, .video-js, .vjs-poster {
            border-radius: 0 0 @AvatarBorderRadius @AvatarBorderRadius;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04);
            margin-bottom: -5px;
        }

        .msgContainer {
            padding-bottom: 10px;
        }

        &.pic, &.video {
            .msgContainer {
                padding-bottom: 0px;
                margin-bottom: -5px;
            }
        }
    }
}

.msgYouList {
    .msgYouItem:last-child {
        .userCard {
            padding-bottom: 10px;
        }
    }
}

.coverShadow {
    border-radius: 4px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.04);

    .msgContainer:last-child {
        .msgImg {
            border-radius: 0 0 @AvatarBorderRadius @AvatarBorderRadius;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04);
            margin-bottom: -3px;
        }
    }
}

.msgShadow {
    margin-top: -4px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.04);
    border-radius: 4px 4px 4px 4px;
}

.emotion-default {
    width: 22px;
    height: 22px;
}

.audioColor {
    color: @audioColor;
}

.atColor {
    color: @fontAtColor;
}
